<template>
  <div class="pane">
    <div v-if="list.length==0" class="wujilu">
      <i class="iconfont icon-zanwuyituichudingdan"></i>
      <p>{{ $t('您还没有记录') }}</p>
    </div>
    <div v-else class="list" @scroll="scrollUpload">
      <div v-for="(item, index) in list" :key="index" class="exchange-item">
        <div class="hd">
          <div class="left">{{ item.coin_symbol }}</div>
          <div class="right">{{ item.ctime | timeFormat() }}</div>
        </div>
        <div class="bd">
          <div class="left">{{ item.change }}</div>
          <div class="right">{{ item.detial_type }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data () {
    return {
      list: [],
      pageIndex: 1,
      finished: false
    }
  },
  beforeMount () {
    this.getRecharge()
  },
  methods: {
    ...mapActions({
      recharge: 'user/recharge'
    }),
    getRecharge (page) {
      const payload = {
        transaction_type: 1,
        page_size: 20,
        page: page || this.pageIndex
      }
      this.recharge(payload)
        .then((data) => {
          this.list = this.list.concat(data.data.data)
          this.pageIndex++
          this.finished = true
        })
        .catch((data) => {})
    },
    scrollUpload (e) {
      if (!this.finished) { return false }
      const scrollHeight = e.target.scrollHeight
      const scrollTop = e.target.scrollTop
      const clientHeight = e.target.clientHeight
      if (scrollHeight - scrollTop <= clientHeight) {
        this.getRecharge(this.pageIndex)
      }
    }
  }
}
</script>
<style scoped>
.list {overflow: hidden;}
.exchange-item {
  border-bottom: 1px solid #eee;
  padding: 10px 15px;
}
.exchange-item .hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666666;
  height: 30px;
  line-height: 30px;
}
.exchange-item .left,
.exchange-item .right {
  font: inherit;
  color: inherit;
}
.exchange-item .hd .left{
  font-size: 14px;
  font-weight: bold;
}
.exchange-item .bd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 20px;
  font-size: 14px;
}
.exchange-item .bd .right {
  color: #1b8afe;
}
.list {
  height: calc(100vh - 98px);
  overflow-y: auto;
}
</style>
